<template>
    <a-layout-sider width="240px" v-model:collapsed="ThemeConfig.collapsed" :class="getISMobisz">
        <div class="navTabar">
            <div v-if="ThemeConfig.IsLogo" class="LOGO">
                <!-- LOGO -->
                <SvgIcon :name="iconbgimg" :size="45" />
                <span v-if="!ThemeConfig.collapsed">
                    Vue-futuret-Admin
                </span>
            </div>
            <!-- theme="dark" -->
            <a-menu v-model:openKeys="state.openKeys" :style="{ height: ThemeConfig.IsLogo ? '94vh' : '100vh' }"
                mode="inline" v-model:selectedKeys="state.selectedKeys" @openChange="onOpenChange">
                <template v-for="chi in RouterListchi" :key="chi.path">
                    <a-menu-item v-if="!chi.children" @click="getuseRouter(chi.path)" :key="chi.path">
                        <template #icon>
                            <SvgIcon :name="chi.meta.icon" />
                        </template>
                        <span>
                            {{ $t(chi.meta.title) }}
                        </span>
                    </a-menu-item>
                    <template v-if="chi.children">
                        <a-sub-menu :key="chi.path">
                            <template #icon>
                                <SvgIcon :name="chi.meta.icon" />
                            </template>
                            <template #title>{{ $t(chi.meta.title) }}</template>
                            <template v-for="on in chi.children" :key="on.path">
                                <a-menu-item @click="getuseRouter(on.path)" v-if="!on.children" :key="on.path">
                                    <template #icon>
                                        <SvgIcon :name="on.meta.icon" />
                                    </template>
                                    <span>{{ $t(on.meta.title) }}</span>

                                </a-menu-item>
                                <template v-else>
                                    <a-sub-menu :key="on.path">
                                        <template #icon>
                                            <SvgIcon :name="on.meta.icon" />
                                        </template>
                                        <template #title>{{ $t(on.meta.title) }}</template>
                                        <navTabar_chilren :RouterChildren="on.children" />
                                    </a-sub-menu>
                                </template>

                            </template>
                        </a-sub-menu>
                    </template>
                </template>
            </a-menu>
        </div>
    </a-layout-sider>
    <div :style="ThemeConfig.collapsed ? 'width: 80px;' : 'width:240px'" class="Thuans"></div>
</template>

<script setup lang="ts">
import { reactive, computed, watch, onMounted, Ref, ref } from 'vue';
import { RouterStore, RouterSession } from '/@/stores/RouterSrore'
import { useRoute, useRouter } from 'vue-router';
import { DataViewState } from '/@/stores/RouterView'
import { storeToRefs } from 'pinia'
import { isMobile } from '/@/units/IsPcMobile'
import iconbgimg from '/@/assets/Snipastebg.png'
const DataView = DataViewState()
const { ThemeConfig, isMobileNav } = storeToRefs(DataView)
const route = useRoute()
const Rout = RouterStore()

// 获取缓存路由
const rouSession = RouterSession()
const router = useRouter()
const state = reactive<any>({
    selectedKeys: [route.fullPath],
    openKeys: [],
    preOpenKeys: ['sub1'],
    clientWidth: 0
});
// 自动适应跳转
watch(() => route.fullPath, (newvalue) => {
    state.selectedKeys = [route.fullPath]
})
const layoutsider: Ref<HTMLElement | undefined> = ref()
const os = isMobile()
const getISMobisz = computed(() => {
    if (os.isAndroid || os.isPhone) {
        if (isMobileNav.value) {
            const masking = document.createElement('div') as HTMLDivElement
            masking.setAttribute('class', 'future-mode-masking')
            const mode = document.querySelector('.MainPage') as HTMLElement
            mode?.appendChild(masking)
            masking.addEventListener('click', () => {
                closeModeblie()
            })
            return ['wangwangSide']
        } else {
            closeModeblie()
            return ['future-mode']
        }
    } else {
        return ['wangwangSide']
    }
})


const closeModeblie = (): void => {
    const modemasking = document.querySelector('.future-mode-masking') as HTMLElement
    setTimeout(() => {
        modemasking?.parentNode?.removeChild(modemasking);
    }, 300);
    isMobileNav.value = false
}
onMounted(() => {

    IspathSeleced()
    window.addEventListener('resize', (vs) => {
        state.clientWidth = document.body.clientWidth
    })
})

// 这是判断当前选中的菜单，让它的父级菜单展开
const IspathSeleced = () => {
    let paths: any = route.fullPath.split('/').map(e => {
        if (e && e !== '') {
            return '/' + e
        }
    })

    state.openKeys = paths.map((e: string | undefined) => e)
}

// 至允许一个菜单打开，完成聚焦菜单动作
const onOpenChange = (openKeys: string[]) => {
    if (ThemeConfig.value.MenuExpansion) return
    state.openKeys = []
    openKeys.forEach((key, index) => {
        if (openKeys[openKeys.length - 1].includes(key)) {
            state.openKeys.push(key)
        }
    })
};
watch(() => ThemeConfig.value.MenuExpansion, () => {
    state.openKeys = []
    IspathSeleced()
})

// 跳转
const getuseRouter = (paths: string): void => {
    router.push(paths)
}

const RouterListchi = computed(() => {
    return (<Array<any>>Rout.routesList)
})


</script>

<style scoped lang="scss">
.wangwangSide {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 11;
    max-width: 240px;
    height: 100vh;
    max-height: 100vh;


    .navTabar {
        height: 100vh;
        position: relative;

        .LOGO {
            color: var(--wang-bglefts);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1vw;
            height: 6vh;

        }

        :deep(.ant-menu) {
            overflow-y: auto;
            background-color: var(--wang-menu-bgcolor);
            color: var(--wang-menu-color);
            width: 100%;

            &::-webkit-scrollbar {
                width: 8px;
                height: 8px;
                background-color: var(--wang-menu-bgcolor);
                z-index: 1;
            }

            /*定义滚动条轨道
内阴影+圆角*/
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                border-radius: 2px;
                background-color: var(--wang-menu-bgcolor);
            }

            /*定义滑块
内阴影+圆角*/
            &::-webkit-scrollbar-thumb {
                border-radius: 2px;
                // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                background-color: rgba(0, 0, 0, 0.1);
                // filter: brightness(200%);
            }

            .ant-menu-item {
                color: var(--wang-menu-color);

                &:hover {
                    // filter: brightness(200%);
                    background-color: var(--wang-meun-hover-color);
                    color: var(--wang-menu-color);

                    &>.ant-menu-title-content {
                        color: var(--wang-menu-activetext) !important;
                    }

                    &>.ant-menu-item-icon {
                        color: var(--wang-menu-activetext) !important;
                    }
                }
            }

            // 上级别
            .ant-menu-submenu-active {
                &>.ant-menu-submenu-title {
                    &:hover {
                        background-color: var(--wang-meun-hover-color) !important;
                        color: var(--wang-menu-activetext) !important;

                        &>.ant-menu-title-content {
                            color: var(--wang-menu-activetext) !important;
                        }

                        &>.ant-menu-item-icon {
                            color: var(--wang-menu-activetext) !important;
                        }
                    }
                }
            }

            .ant-menu-submenu {
                &>.ant-menu-inline {
                    background-color: var(--wang-menu-bgcolor) !important;
                    color: var(--wang-menu-color) !important;
                }

                &>.ant-menu-submenu-title {
                    color: var(--wang-menu-color) !important;

                    &:hover {
                        background-color: var(--wang-meun-hover-color) !important;
                        color: var(--wang-menu-color) !important;
                    }
                }
            }

            // 选中
            .ant-menu-item-selected {
                background-color: var(--wang-menu-active);

                &>.ant-menu-submenu-title {
                    color: var(--wang-menu-color) !important;
                }

                &>.ant-menu-item-icon {
                    color: var(--wang-menu-activetext) !important;
                }

                &>.ant-menu-title-content {
                    color: var(--wang-menu-activetext) !important;
                }

            }

            .ant-menu-item-active {
                &:hover {
                    // filter: brightness(200%);
                    background-color: var(--wang-meun-hover-color) !important;
                    color: var(--wang-menu-color) !important;
                }
            }

        }

    }
}

.ant-layout-sider {
    background: var(--wang-menu-bgcolor) !important;
    margin-right: 20px;
}
</style>